<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title>人脸搜索</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" type="text/css" href="https://www.layuicdn.com/layui-v2.5.5/css/layui.css" />
<style type="text/css">
.preview {
  width: 150px;
  height: 150px;
}
</style>
</head>

<body>
<form class="layui-form" action="" style="display: block;" id="form-data" lay-filter="data-form">
  <div class="layui-form-item">
    <input type="hidden" name="id" class="layui-input">
    <div class="layui-form-item">
      <label for="" class="layui-form-label">部门</label>
      <div class="layui-input-block">
        <select name="department_id" id="department">
          <option value="">请选择部门</option>
        </select>
      </div>
    </div>

    <div class="layui-form-item">
      <label for="" class="layui-form-label">组</label>
      <div class="layui-input-block">
        <select name="group_id" id="group">
          <option value="">请选择组</option>
        </select>
      </div>
    </div>

    <div class="layui-form-item">
      <label for="" class="layui-form-label">类型</label>
      <div class="layui-input-block">
        <select name="type_id" id="type">
          <option value="">请选择类型</option>
        </select>
      </div>
    </div>

    <div class="layui-form-item">
      <label for="" class="layui-form-label">人脸图片</label>
      <input type="hidden" name="photo_ids" class="layui-input"/>
      <div class="layui-input-inline">
        <div class="layui-upload-drag" id="img1">
          <i class="layui-icon"></i>
          <p>点击上传图片，或将图片拖拽到此处</p>
        </div>
      </div>
      <!--预览-->
      <div class="layui-input-inline">
        <div class="layui-upload-list">
          <img class="layui-upload-img preview" id="preview">
          <div id="searchResult"></div>
        </div>
      </div>
    </div>
</form>

</body>
<script src="https://www.layuicdn.com/layui-v2.5.5/layui.js" type="text/javascript" charset="utf-8"></script>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../../js/config.js" type="text/javascript" charset="utf-8"></script>
<script src="../../js/common.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var title = "员工";
var tableName = "employee"
var uri = projectName + '/api/form';
document.title = title + '数据表单';
var listPageName = tableName + "_list.html";

var detectedImagesUrl = projectName + '/image?filename=';
layui.use(["jquery", "upload", "form", "layer", "element"], function() {
  var $ = layui.$,
    element = layui.element,
    layer = layui.layer,
    upload = layui.upload,
    form = layui.form;
  layuiFormRender(uri, form, layer);

  //部门
  var departmentDictUrl = uri + "/listAll?tableName=employee_department";
  layuiSelectAddChildForObject(departmentDictUrl, 'department', form);
  var gruopDicturl = uri + "/listAll?tableName=employee_group";
  layuiSelectAddChildForObject(gruopDicturl, 'group', form);
  var typeDicturl = uri + "/listAll?tableName=employee_type";
  layuiSelectAddChildForObject(typeDicturl, 'type', form);
  //重新渲染
  form.render('select');
  //拖拽上传
  var uploadInst = upload.render({
    elem: '#img1',
    url: projectName + '/face/search',
    before: function(obj) {
      //预读本地文件示例，不支持ie8
      obj.preview(function(index, file, result) {
        $('#preview').attr('src', result); //图片链接（base64）
      });
    },
    done: function(resp) {
      var searchResult = $('#searchResult');
      if(resp.code != 0) {
        searchResult.html("<span>" + resp.msg + "</span><br/>");
      } else {
        searchResult.html(JSON.stringify(resp.data));
        //打印后台传回的地址: 把地址放入一个隐藏的input中, 和表单一起提交到后台, 此处略..
      }
    },
    error: function() {
      //演示失败状态，并实现重传
      var demoText = $('#demoText');
      demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-mini demo-reload">重试</a>');
      demoText.find('.demo-reload').on('click', function() {
        uploadInst.upload();
      });
    }
  });
  element.init();
});
</script>

</html>